/* 
    需求: 鼠标移入a标签, 点亮背景图, 显示当前a标签下面的span
    需求: 鼠标移出a标签, 回到原样

*/
//获取元素
let adom = document.querySelectorAll('.online a')


//遍历adom
adom.forEach(function (v) {
    //注册移入事件
    v.addEventListener('mouseover', function () {
        //v当前操作的对象
        v.style.backgroundPositionX = '-50px'
        v.querySelector('span').style.display = 'block'
    })

    //注册移出事件
    v.addEventListener('mouseout', function () {
        v.style.backgroundPositionX = 0
        v.querySelector('span').style.display = 'none'
    })
})
/* 需求:滚动游览器,当滚动距离大于等于800,显示回到顶部,否则隐藏
事件源:window
事件类型:scroll
*/
//获取元素
let toTopBtn = document.querySelector('#toTopBtn')

window.addEventListener('scroll', function(){

    let sTop = document.documentElement.scrollTop //获取当前的滚动距离
    
     if(sTop>=800 ){
         toTopBtn.style.display='block'//显示
     }else{
         toTopBtn.style.display='none'//隐藏
     }
})

/* 需求:点击toTopBtn,让滚动条慢慢回到顶部
需求:点击toTopBtn,每隔30毫秒运动50px,直到0为止. */

/* toTopBtn.addEventListener('click',function(){
    let timeId = setInterval(function(){
        document.documentElement.scrollTop -=50;//每隔30毫秒运动50px
        if(document.documentElement.scrollTop<=0){
            clearInterval(timeId);//关闭计时器
        }
    })
})
 */

/* 需求:点击toTopBtn,让滚动条慢慢回到顶部
需求:点击toTopBtn,每隔30毫秒运动50px,直到0为止. */

toTopBtn.addEventListener('click',function(){

    //点击时获取总运动路程

    let s = document.documentElement.scrollTop;
    //设置运动总时间
    let t = 1000;//毫秒
    //每次运动的速度
    let v = s/t //每一毫秒运动的距离
    //每隔30毫秒的运动距离:30*v
    let timeId = setInterval(function(){
        document.documentElement.scrollTop -=30*v;//每隔30毫秒运动50px
       if(document.documentElement.scrollTop<=0){
        clearInterval(timeId);//关闭计时器
       }
    })




   
})
